<template>
	<!-- <page-meta page-style="overflow:visiable"></page-meta> -->
	<view style="z-index:10000" v-if="isShow">
		<u-mask :show="isShow">
			<view class="warp">
				<view class="body" @tap.stop v-if="!showSlot">
					<view class="title">{{title}}</view>
					<scroll-view scroll-y="true" style="height: 600rpx;">
						<view class="content">
							<rich-text :nodes="content"></rich-text>
						</view>
					</scroll-view>
				</view>
				<slot v-else></slot>
				<view class="close" @click="close" v-if="showClose">
					<image src="/static/images/close.png" class="closeicon"></image>
				</view>
			</view>
		</u-mask>
	</view>
</template>

<script>
	export default {
		name:"overlay",
		props:{
			title:{
				type:String,
				default:'标题'
			},
			content:{},
			showSlot:{
				type:Boolean,
				default:false
			},
			showClose:{
				type:Boolean,
				default:true
			}
		},
		data() {
			return {
				isShow:false
			}
		},
		methods:{
			show(){
				this.isShow = true;
			},
			close(){
				this.isShow = false;
				this.$emit('onClose')
			}
		}
	}
</script>

<style lang="scss" scoped>
.warp {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 100%;
}
.body {
	width: 522rpx;
	background: #FFFFFF;
	box-shadow: 0 5rpx 2rpx 1rpx rgba(207, 207, 207, 0.25);
	border-radius: 20rpx;
	text-align: center;
	padding: 30rpx;
	.title {
		font-size: 28rpx;
		font-weight: bold;
		padding: 20rpx 0;
		text-align: center;
	}
	
	.content {
		font-size: 28rpx;
		text-align: justify;
		line-height: 2;
	}
}
.close{
	margin-top: 46rpx;

	.closeicon{
		width: 52rpx;
		height: 50rpx;
	}
}
</style>
